<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-row :gutter="15" class="header">
      <el-col :span="6">
        <el-card shadow="always">
          <questionAll />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <Direction />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <Object />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <newQuestion />
        </el-card>
      </el-col>
    </el-row>
    <br />
    <!-- 主要内容 -->
    <el-card class="box-card shoutimu">
      <xueKePaiMing />
    </el-card>
    <br />
    <!-- 热门搜索和销售额占比 -->
    <el-row :gutter="15" class="search">
      <el-col :span="12">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>线上热门搜索</span>
            <el-button style="float: right; padding: 3px 0" type="text">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link"> ... </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">1111</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus"
                    >2222</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-circle-plus-outline"
                    >3333</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-check">4444</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check"
                    >5555</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">1111</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus"
                    >2222</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-circle-plus-outline"
                    >3333</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-check">4444</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check"
                    >5555</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </div>
          <div>
            <!-- 表格 -->
            <el-table
              :data="tableData"
              height="250"
              style="width: 100%"
              type="index"
            >
              <el-table-column prop="date" type="index"> </el-table-column>
              <el-table-column prop="keyWord" label="关键词" width="480">
              </el-table-column>
              <el-table-column prop="people" label="人数" sortable>
              </el-table-column>
              <el-table-column prop="week" label="周增长率" sortable>
              </el-table-column>
            </el-table>
            <br />
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000"
              class="pagination"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>销售额类别占比</span>
            <el-button style="float: right; padding: 3px 0" type="text">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link"> ... </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>1111</el-dropdown-item>
                  <el-dropdown-item>2222</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>1111</el-dropdown-item>
                  <el-dropdown-item>2222</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </div>
          <div>
            <!-- 饼状图部分 -->
            <xiaoshou />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <!-- 周搜索趋势 -->
    <el-card class="box-card weeksearch">
      <div slot="header" class="clearfix">
        <span>周搜索趋势</span>
        <el-button style="float: right; padding: 3px 0" type="text">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link"> ... </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>1111</el-dropdown-item>
              <el-dropdown-item>2222</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>1111</el-dropdown-item>
              <el-dropdown-item>2222</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button>
      </div>
      <div>
        <!-- 饼状图部分 -->
        <weekSearch />
      </div>
    </el-card>
  </div>
</template>

<script>
import questionAll from "./question-all.vue";
import Direction from "./question-deriction.vue";
import Object from "./object.vue";
import newQuestion from "./newquestion.vue";
import xueKePaiMing from "./xuekepaimiang.vue";
import xiaoshou from "./xiaoshou.vue";
import weekSearch from "./weeksearch.vue";
export default {
  name: "dashboard",
  components: {
    questionAll,
    Direction,
    Object,
    newQuestion,
    xueKePaiMing,
    xiaoshou,
    weekSearch,
  },
  props: {},
  data() {
    return {
      tableData: [
        {
          week: "63%",
          keyWord: "搜索关键词-2",
          people: "659",
        },
        {
          week: "44%",
          keyWord: "搜索关键词-2",
          people: "6387",
        },
        {
          week: "44%",
          keyWord: "搜索关键词-2",
          people: "345",
        },
        {
          week: "99%",
          keyWord: "搜索关键词-6",
          people: "645",
        },
        {
          week: "77%",
          keyWord: "搜索关键词-7",
          people: "345",
        },
        {
          week: "24%",
          keyWord: "搜索关键词-8",
          people: "466",
        },
        {
          week: "46%",
          keyWord: "搜索关键词-9",
          people: "464",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px;
  .header {
    .el-col {
      .el-card {
        padding: 10px 5px;
        height: 252px;
        ::v-deep .el-card__body {
          padding: 5px 20px !important;
        }
      }
    }
  }
  .shoutimu {
    height: 395px;
    padding: 20px;
    ::v-deep .el-card__body {
      padding: 5px 20px !important;
    }
  }
  .search {
    .el-card {
      height: 398px;
    }
  }
  .weeksearch {
    height: 398px;
  }
  .pagination {
    float: right;
  }
}
</style>
